<template>
  <div class="info">
    <div class="M_avator">
      <div>
        <van-popover
          v-model="showPopover"
          trigger="click"
          placement="right-start"
        >
          <!-- 点击头像要显示的东西 -->
          <van-cell title="我的头像" size="large">
            <template #title>
              <div style="display: flex; flex-direction: column">
                <div class="M_avator">
                  <img :src="info.avator" width="50px" height="50px" />
                  <div style="padding-left: 2vw">
                    <p class="nickName">{{ info.nickname }}</p>
                    <van-tag plain type="primary">{{ info.Class }}</van-tag>
                  </div>
                </div>
                <van-cell
                  title="ta的校友圈"
                  is-link
                  @click="handlePrefer"
                  style="padding: 1vh 0; font-size: 12px"
                />
                <van-button icon="plus" @click="addFriend">添加好友</van-button>
                <van-button icon="chat" @click="handleChat">发消息</van-button>
              </div>
            </template>
          </van-cell>
          <template #reference>
            <img :src="info.avator" width="50px" height="50px" />
          </template>
        </van-popover>
      </div>
      <div style="margin-left: 10px; flex-grow: 1">
        <p class="nickName">{{ info.nickname }}</p>
        <p class="time">{{ info.releasedTime }}</p>
      </div>
      <slot name="delete"></slot>
    </div>
    <div class="content">
      <div class="content_words">{{ info.content }}</div>
      <div>
        <van-uploader
          v-model="this.fileList"
          :show-upload="false"
          :deletable="false"
        />
      </div>

      <!-- 操作按钮 -->
      <div class="operate" v-if="showOpera">
        <div v-if="info.type === '4'">
          <van-icon
            v-if="iscart === false"
            name="shopping-cart-o"
            size="20px"
            @click="handleCart"
          />
          <van-icon
            v-if="iscart === true"
            name="shopping-cart"
            size="20px"
            @click="handleCart"
          />
          <span>￥{{ info.price || "暂无定价" }}</span>
        </div>
        <div v-else></div>
        <div>
          <van-icon
            v-if="islike === false"
            name="like-o"
            size="20px"
            @click="handleLike"
          />
          <van-icon
            v-if="islike === true"
            name="like"
            size="20px"
            @click="handleLike"
            color="red"
          />
          <span>{{ info.liked }}</span>
        </div>
        <div>
          <van-icon name="chat" size="20px" @click="showComments" />
          <span>{{ info.collected }}</span>
        </div>
      </div>
      <div v-else class="price">￥{{ info.price }}</div>

      <!-- 评论和回复 -->
      <div v-if="isShowComments" class="comments">
        <p v-for="(item, index) in commentList" :key="index">
          <span>{{ item.reply_nickname }}：</span>{{ item.comment }}
        </p>
        <p>
          <van-field
            v-model="myComment"
            rows="1"
            autosize
            type="textarea"
            placeholder="请输入留言"
            style="padding: 0"
          >
            <template #button>
              <van-button size="small" type="primary" @click="handleMyComment"
                >发送</van-button
              >
            </template>
          </van-field>
        </p>
        <p style="text-align: center" @click="isShowComments = false">
          <van-icon name="arrow-up" size="15px" />收起
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { timestampToTime } from "@/utils/timeStamp";
export default {
  props: ["pieceData", "showOpera"],
  data() {
    return {
      info: this.pieceData,
      fileList: [],
      islike: false,
      iscart: false,
      isComment: false,
      isShowComments: false,
      commentList: [],
      myComment: "",
      showPopover: false,
    };
  },
  created() {
    if (this.info.fileList) {
      let arr = this.info.fileList.split(";");
      for (let i = 0; i < arr.length - 1; i++) {
        this.fileList.push({ url: `${arr[i]}` });
      }
    }
    this.info.releasedTime = timestampToTime(this.info.time);
  },
  methods: {
    //添加喜欢
    handleLike() {
      this.$axios
        .post("handleLike", {
          operation: this.islike ? "subtract" : "add",
          userID: localStorage.getItem("userID"),
          momentID: this.info.momentID,
        })
        .then((res) => {
          if (res.code === 200) {
            this.islike = !this.islike;
            this.islike ? (this.info.liked += 1) : (this.info.liked -= 1);
          }
        });
    },
    // 添加取消购物车
    handleCart() {
      let type = this.iscart === false ? "add" : "remove";
      let userID =
        this.$store.state.userInfo.userID || localStorage.getItem("userID");
      this.$axios
        .post("/addToCart", {
          momentID: this.info.momentID,
          userID: userID,
          type: type,
        })
        .then((res) => {
          if (res.code === 200) {
            this.iscart = !this.iscart;
          }
        });
    },
    // 提交我的评论
    handleMyComment() {
      let { momentID } = this.info;
      let userID=localStorage.getItem("userID")
      this.$axios
        .post("/saveComment", {
          momentID: momentID,
          userID: userID,
          comment: this.myComment,
        })
        .then((res) => {
          if (res.code === 200) {
            this.commentList.push({reply_nickname:localStorage.getItem("nickname"),comment:this.myComment})
            this.info.collected++
            this.myComment = "";
          }
        });
    },
    // 显示评论
    showComments() {
      this.isShowComments = true;
      this.$axios
        .get(`/getComments`, { params: { momentID: this.info.momentID } })
        .then((res) => {
          if (res.code === 200) {
            this.commentList = res.data;
          }
        });
    },
    // 添加好友
    addFriend() {
      let userID =
        this.$store.state.userInfo.userID || localStorage.getItem("userID");
      this.$axios.post("/saveFriend", {
        friendID: this.info.userID,
        userID: userID,
      });
    },
    // ta的校友圈
    handlePrefer() {
      this.$router.push({
        path: "/prefer",
        query: { origin: "released", userID: localStorage.getItem("userID") },
      });
    },
    handleChat() {
      this.$store.commit('SET_CHAT_USER',{userID:this.info.userID,avator:this.info.avator,nickname:this.info.nickname,historyList:[]})
      this.$router.push({
        path: "/chatroom",
        query: { 'userID': this.info.userID, 'name':this.info.nickname, 'avator': this.info.avator },
      });
    },
  },
};
</script>

<style scoped>
.M_avator {
  display: flex;
  text-align: left;
}
.content {
  text-align: left;
}
.info {
  width: 90vw;
  border-radius: 5px;
  background-color: #fafafa;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  margin: 5px auto;
  padding: 5px;
  z-index: 999;
}
.nickName {
  margin: 0;
  color: #0b1994;
  text-align: left;
  line-height: 20px;
  font-size: 18px;
  font-weight: bold;
}
.time {
  margin-top: 5px;
  margin-bottom: 0;
}
.content_words {
  text-align: left;
  padding: 10px;
}

.operate {
  display: flex;
}
.operate div {
  flex: 1;
}
.comments p {
  margin: 5px 0;
}
.comments span {
  font-weight: bold;
}
.price {
  text-align: right;
  font-size: 18px;
  color: red;
  padding: 0 10px;
}
</style>